<template>
  <ul @click.prevent @touchend.prevent :class="{'tool-tips':true, 'float-bottom':isFloatBottom}" v-show="tipShow"
      :style="tipsStyle">
    <li v-for="item in dataList" @touchend="handleClick(item)">{{item.text}}</li>
  </ul>
</template>

<script>
  import bus from '../../utils/bus'
  import request from '../../helper/request'
  import {mapActions} from 'vuex'

  // 请求档案类型列表
  // 详情默认 '000'
  const TYPE_LIST = {
    '001': '/person?sfzh=', // 人员
    '002': '/case?ajbh=', // 案件
    '003': '/car?cph=', // 车辆
    '004': '/phone?sjh=', // 手机
    '005': '/qq?bsh='  // QQ
  }

  export default {
    name: 'zt-tooltips',
    props: {},
    /**
     * 内部数据状态
     * @member
     * @property {object} data
     * @property {object} params 绑定节点的innerHTML
     * @property {array} dataList  组件的功能数组
     * @property {object} pos 唤起tooltips的节点的position值
     * @property {boolean} [tipShow = false] tooltips的显示控制flag
     */
    data() {
      return {
        params: {},
        dataList: [],
        pos: {},
        tipShow: false
      }
    },
    computed: {
      /**
       * 计算属性
       * @member
       * @property {Object} tipsStyle 通过绑定节点 控制tooltips的位置
       */
      tipsStyle() {
        let hpWidth = document.documentElement.clientWidth / 2
        let isRight = this.pos.left > hpWidth // ? true : false
        let style = {
          top: this.pos.top <= 100 ? this.pos.top + this.pos.height + 'px' : this.pos.top + 'px'
        }
        if (isRight) {
          style['right'] = hpWidth * 2 - this.pos.left - this.pos.left / 3 + 'px'
          style['transform'] = this.pos.top <= 100 ? `translate3d(40%,0,0)` : 'translate3d(40%,-110%,0)'
        } else {
          style['left'] = (this.pos.left - 5) + 'px'
          style['transform'] = this.pos.top <= 100 ? '' : 'translate3d(0,-110%,0)'
        }
        return style
      },
      isFloatBottom() {
        return this.pos.top && this.pos.top <= 100
      }
    },
    components: {},
    filters: {},
    methods: {
      /**
       * handleClick
       * @function
       * name handleClick
       * 列表点击执行对应的 函数
       */
      handleClick(item) {
        this.typeSelect(item.type, this.params)
      },
      /**
       * 执行当前选择操作
       * @param {string} type 车主身份证号
       * @param {object} params 车主身份证号
       */
      typeSelect(type, params) {
        if (type === '0') { // 详情
          request('superRecord/case/unified_detail', 'SC0437', params).then(res => {
            console.log('请求参数', params)
            console.log('详情', res)
            this.getotherDetail(res.rowArr)
            this.getotherFlag('4')
            this.$router.push('detail')
          }).catch(err => {
            this.$toast(err.msg)
          })
        } else if (type === '1' && params.bsh && TYPE_LIST[params.bshlx]) { // 档案
          this.$router.push(TYPE_LIST[params.bshlx] + params.bsh)
        }
      },
      ...mapActions('personStore', {
        getotherDetail: 'getotherDetail',
        getotherFlag: 'getotherFlag'
      })
    },
    watch: {},
    /**
     * Mounted事件
     * @event mounted
     * 组件生成后：监听指令'v-init-tooltips'绑定节点通过eventBus派发的'tooltipsDataTrans' 事件, 通过payload数据定义组件的data
     * 监听body的点击事件，排除指令'v-init-tooltips'绑定成功的节点（打开tooltips的节点），并关闭tooltips
     */
    mounted() {
      bus.$on('tooltipsDataTrans', (dataObj) => {
        if (dataObj.params.tableName && dataObj.params.systemid) {
          this.dataList = [
            {
              text: '详情',
              type: '0'
            },
            {
              text: '档案',
              type: '1'
            }
          ]
        }else {
          this.dataList = [
            {
              text: '档案',
              type: '1'
            }
          ]
        }
        this.params = dataObj.params
        this.pos = dataObj.pos
        this.tipShow = true
      })
      document.body.addEventListener('touchstart', (event) => {
        if (!event.target.getAttribute('opentooltips')) {
          this.tipShow = false
        }
      })
    },
    created() {
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../style/mixin";

  .clearfix {
    @include clearfix
  }

  .tool-tips {
    position: fixed;
    color: white;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    @include clearfix;
    li {
      display: inline-block;
      float: left;
      height: 1.9rem;
      padding: 0 10px;
      line-height: 1.9rem;
      font-size: 1rem;
      border-right: 1px solid white;
    }

  }

  .tool-tips:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0rem;
    height: 0;
    border-top: 0.5rem solid rgba(0, 0, 0, 0.7);
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
  }

  .tool-tips:before {
    content: '';
    display: none;
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0rem;
    height: 0;
    border-bottom: 0.5rem solid rgba(0, 0, 0, 0.7);
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
  }

  .tool-tips.float-bottom {
    &:after {
      display: none;
    }
    &:before {
      display: block;
    }
  }

</style>
